<template>
    <div class="MyApply">
        <!--        面包导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>寝室管理</el-breadcrumb-item>
            <el-breadcrumb-item>我的申请记录</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片-->
        <el-card class="box-card">
            <!--            搜索区域-->
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-select v-model="queryInfo.states" placeholder="处理状态" clearable>
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-input placeholder="请输入申请原因"  v-model="queryInfo.note" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="search" ></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <!--            表格区域-->
            <el-table :data="aoolyList" border>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="申请原因" prop="note"></el-table-column>
                <el-table-column label="申请类型" prop="scode">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.scode ===0" >换寝</el-tag>
                        <el-tag type="success" v-else-if="scope.row.scode ===1">请假</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="申请时间" prop="createDate"></el-table-column>
                <el-table-column label="状态" prop="states" >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.states ===0" >未处理</el-tag>
                        <el-tag type="success" v-else-if="scope.row.states ===1">已处理</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <!--                分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "MyApply",
        data(){
            return{
                aoolyList: [],
                total: 0,
                queryInfo:{
                    page: 1,
                    size: 10,
                },
                options: [{
                    value: '0',
                    label: '未处理'
                }, {
                    value: '1',
                    label: '已处理'
                }],
                value: ''
            }
        },
        created() {
            this.getAllApply()
        },
        methods:{
            async getAllApply(){
                this.queryInfo.uid = window.sessionStorage.getItem('id')
                const {data: res} = await this.$http.get('Sign/getAllApply',{
                    params: this.queryInfo
                })
                if(res.code !== 200) return this.$message.error(res.message)
                this.aoolyList = res.data.data
                this.total = res.data.total
            },
            //搜索
            async search(){
                const {data: res} = await this.$http.get('Sign/getAllApply',{
                    params: this.queryInfo
                })
                if(res.code !== 200) return this.$message.error(res.message)
                this.aoolyList = res.data.data
            },
            //监听pagesize的改变
            handleSizeChange(newSize){
                this.queryInfo.size = newSize
                this.getSignList()
            },
            //页码值改变
            handleCurrentChange(newPage){
                this.queryInfo.page = newPage
                this.getSignList()
            },
            //修改状态
            async resove(row){
                if(row.states == 1){
                    return this.$message.info("已经审批通过")
                }
                const confirm = await this.$confirm('此操作将永久通过该用户申请, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err =>{
                    return err
                })
                if(confirm !== 'confirm') return this.$message.info('已取消删除')
                const {data:res} = await this.$http.get('Sign/updateApply',{
                    params:{
                        id: row.id
                    }
                })
                if(res.code !== 0) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.getAllApply()
            }
        }
    }
</script>

<style scoped>

</style>